<template>
  <div>
    <!-- 搜索 start -->
    <van-sticky :offset-top="0">
        <div class="search">
          <div class="jiahao">
            <van-icon name="plus" />
          </div>
      <van-search
        placeholder="请输入搜索关键词"
        v-model="search"
        />
      <div class="xingli">
        <van-icon name="goods-collect-o"></van-icon>
      </div>
     </div>
      </van-sticky>
     <!-- 搜索 end -->
     <!-- 分类 start -->
     <div class="fenlei">
        <div class="fenlei-main">
        <ul>
          <router-link v-for="(abc,a12) in fenlei" :key="a12" :to="abc.path">
           <li>
                <div class="pic" v-bind:style="{ color: abc.color}">
                    <van-icon :name="abc.name" ></van-icon>
                </div>
                <p>{{ abc.text }}</p>
            </li>
          </router-link>
        </ul>
        </div>
     </div>
     <!-- 分类 end -->
     <!-- 本周流行菜谱 start -->
    <div class="lxcp">
      <div class="lxcp-main">
        <div class="bac"  v-bind:style="{ 'background-image': 'url('+ abc.bgpic+')', width: 164+'px', height: 128 +'px'}" v-for="(abc,a12) in lxcp" :key="a12">
          <p>{{ abc.p1 }}<br>{{ abc.p2 }}</p>
        </div>
      </div>
    </div>
    <!-- 本周流行菜谱 end -->
    <!-- 幻灯片 start -->
    <div class="ppt">
      <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(a,a33) in ppt" :key="a33">
          <p>{{ a.text }}</p>
          <img :src="a.pptpic" v-bind:style="{width:76+'px',height:+'76px'}">
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 幻灯片 end  -->
    <!-- 广告 start -->
    <div class="news">
      <div class="top">
        <img src="/assets/img/guanggao.jpg" v-bind:style="{width:339+'px',height:96+'px'}">
      </div>
      <div class="bottom">
        <p>高阶吃货club，爱吃的你不可错过！</p>
        <button>广告</button>
      </div>
    </div>
    <!-- 广告 end -->
    <!-- 本周食材包 start -->
    <div class="bz">
      <div class="bz-main">
        <div class="title">
          <span class="left">本周食材包</span>
          <span class="right">查看全部</span>
        </div>
        <div>
          <van-swipe :loop="false" :width="200" style="width: 100%;height:200px">
            <van-swipe-item v-for="(a,a33) in bz" :key="a33">
              <div style="height:164px;width:95%"
                   v-bind:style="{'background-image': 'url('+ a.bzpic+')'}" class="bz-li">
                <p class="money">{{ a.price }}</p>
              </div>
              <div class="bz-text">
                  <p class="text">{{ a.text }}</p>
                </div>
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
    </div>
    <!-- 本周食材包 end  -->
    <!-- 厨房课堂 start -->
    <div class="bz">
      <div class="bz-main">
        <div class="title">
          <span class="left">本周食材包</span>
          <span class="right">查看全部</span>
        </div>
        <div>
          <van-swipe :loop="false" :width="200" style="width: 100%;height:200px">
            <van-swipe-item v-for="(a,a33) in bz" :key="a33">
              <div style="height:164px;width:95%"
                   v-bind:style="{'background-image': 'url('+ a.bzpic+')'}" class="bz-li">
                <p class="money">{{ a.price }}</p>
              </div>
              <div class="bz-text">
                  <p class="text">{{ a.text }}</p>
                </div>
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
    </div>
    <!-- 厨房课堂 end -->
    <!-- 菜单 start -->
  <div class="bz">
      <div class="bz-main">
        <div class="title">
          <span class="left">本周食材包</span>
          <span class="right">查看全部</span>
        </div>
        <div>
          <van-swipe :loop="false" :width="200" style="width: 100%;height:200px">
            <van-swipe-item v-for="(a,a33) in bz" :key="a33">
              <div style="height:164px;width:95%"
                   v-bind:style="{'background-image': 'url('+ a.bzpic+')'}" class="bz-li">
                <p class="money">{{ a.price }}</p>
              </div>
              <div class="bz-text">
                  <p class="text">{{ a.text }}</p>
                </div>
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
    </div>
    <!-- 菜单 end  -->
    <div class="one">
      <br>
    </div>
    <!-- 底部导航 start -->
    <div class="nav">
      <van-tabbar v-model="active">
        <van-tabbar-item v-for="(a,a44) in nav" :key="a44" :icon="a.name" class="b">
          {{ a.text }}
        </van-tabbar-item>
      </van-tabbar>
    </div>
    <!-- 底部导航 end  -->
</div>
</template>
<script>
import demo03json from '../data/demo03.json';
import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';

Vue.use(Swipe).use(SwipeItem);

export default {
    data () {
        return {
            current: 0,
            active: 0,
            count: 0,
            fenlei: demo03json.fenlei,
            lxcp: demo03json.lxcp,
            ppt: demo03json.ppt,
            nav: demo03json.nav,
            bz: demo03json.bz,
            cf: demo03json.cf,
            cd: demo03json.cd,
            search: ''
        };
    },
    // created: function () {
    //     const api = 'http://127.0.0.1:8080/demo03.json';
    //     this.axios.get(api).then((response) => {
    //         this.fenlei = response.data.fenlei;
    //         this.lxcp = response.data.lxcp;
    //     });
    // },
    computed: {
    },
    methods: {
        onChange (index) {
            this.current = index;
        },
        cpanduan (index) {
            if (index === 0) {
                return 'diyitiao';
            }
            if (index === this.fenlei.length - 1) {
                return 'zuihou';
            }
            return '';
        },
        greet: function (event) {
            // `this` 在方法里指向当前 Vue 实例
            alert('Hello  !');
            // `event` 是原生 DOM 事件
            if (event) {
                alert(event.target.tagName);
            }
        }
    },
    mounted () {
        console.log('挂载事件', this.lxcp);
    }
};

</script>
<style lang="less">
* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
  font-weight: normal;
  font-size: 14px;
}

.search{
    position: fixed;
    width:375px;
    height:44px;
    position: relative;
    background-color:rgba(255, 255, 255, 1);
    .jiahao{
        width: 28px;
        height: 28px;
        margin-left: 14px;
        margin-top: 4px;
        font-size: 28px;
        color: rgba(56, 56, 56, 1);
        padding: 0px;
        position: absolute;
    }
    .van-search{
      width: 267px;
      margin-left: 56px;
      padding: 0px;
      margin-top: 24px
    }
    .xingli{
        width: 28px;
        height: 28px;
        font-size: 28px;
        color: rgba(56, 56, 56, 1);
        padding: 0px;
        position: absolute;
        margin-left: 335px;
        margin-top: -28px;
    }
}
.fenlei {
    width: 375px;
    height: 80px;
    margin-top: -20px;
    .fenlei-main{
        margin: 0 17px;
    }
    li{
    width: 76px;
    height: 64px;
    margin-right: 12px;
    display: inline-block;
    .pic{
        width: 32px;
        height: 32px;
        margin-left: 19px;
        margin-top: 10px;
        font-size: 32px;
    }
    p{
        width: 76px;
        height: 32px;
        color: rgba(80, 80, 80, 1);
        font-size: 14px;
        line-height: 200%;
        text-align: center;
    }
  }
  a:last-child{
    margin-right:0px;
    width: 76px;
    height: 64px;
    margin-top: 20px;
    display: inline-block;
  }
}
.lxcp{
    margin-top: 23px;
    width: 375px;
    height: 128px;
    .lxcp-main{
      margin: 0 18px;
      p{
        width: 132px;
        height: 48px;
        margin-left: 14px;
        margin-top: 64px;
        color: rgba(255, 255, 255, 1);
        font-size: 18px;
        line-height: 150%;
        text-align: left;
        font-weight: bold;
      }
    }
    .bac{
      float: left;
      margin-right:11px;
      background-size: 100% 100%;
    }
    .bac:last-child{
      margin-right: 0px;
    }
}
.ppt{
  margin-top: 16px;
  width: 375px;
  height: 74px;
  p{
    width: 88px;
    height: 48px;
    margin-left: 143px;
    margin-top: 26px;
    color: rgba(80, 80, 80, 1);
    font-size: 18px;
    line-height: 150%;
    text-align: center;
    float: left;
  }
  img{
    margin-top: 12px;
    margin-right: 18px;
    float: right;
    background-size: 100% 100%;
  }
}
.news{
  margin-top: 21px;
  .top{
    margin: 0 18px;
  }
  .bottom{
    width: 339px;
    height: 28px;
    margin: 0 18px;
    p{
      float: left;
      margin-top: 9px;
    }
    button{
      float: right;
      margin-top: 9px;
    }
  }
}
.bz{
  width: 375px;
  height: 269px;
  .bz-main{
    margin: 0 18px;
  }
  .bz-li{
    background-size: 100% 100%;
    p{
      width: 72px;
      height: 30px;
      margin-left: 18px;
      top: 114px;
      color: rgba(255, 255, 255, 1);
      font-size: 20px;
      line-height: 150%;
      text-align: left;
      font-weight: bold;
    }
  }
  .bz-text{
    .text{
      width: 164px;
      height: 50px;
      left: 36px;
      color: rgba(80, 80, 80, 1);
      font-size: 12px;
      line-height: 150%;
      text-align: left;
      font-weight: bold;
    }
  }
  .title{
      width: 339px;
      margin-top: 23px;
      .left{
        float: left;
        width: 153px;
        height: 48px;
        left: 18px;
        top: 87px;
        color: rgba(56, 56, 56, 1);
        font-size: 18px;
        line-height: 150%;
        text-align: left;
      }
      .right{
        float: right;
        width: 79px;
        height: 28px;
        left: 282px;
        top: 398px;
        color: rgba(166, 166, 166, 1);
        font-size: 15px;
        line-height: 150%;
        text-align: right;
      }
    }
}
.one{
  width: 375px;
  height: 50px;
}
.nav{
  position: fixed;
 .van-tabbar-item--active{
    color: rgba(245, 87, 78, 1);
  }
}
</style>
